﻿@model ShopKart.Areas.Admin.Models.ProductVm

@{
    ViewBag.Title = "Product";
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}

@section Stylesheets {
    <link href="@Url.Content("~/Content/Template/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Template/assets/global/plugins/datatables/media/css/jquery.dataTables.css")" rel=" stylesheet" type="text/css" />
}

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light">
                    <div class="portlet-title">
                        <div class="col-lg-2">
                            <div class="caption">
                                <div class="btn-group">
                                    <a class="btn btn-primary btnAddProduct" href="javascript:;">
                                        <i class="fa fa-plus"></i>
                                        <span class="hidden-480">Add Product </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>

                    <div id="ListProduct" class="scroller" style="height:850px" data-rail-visible="1" data-rail-color="yellow" data-handle-color="#a1b2bd">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END PAGE CONTENT-->
<!-- END PAGE CONTENT-->
<!-- start modal box-->
<div id="AddProduct" class="modal fade"></div>
<!-- end modal box-->
<!-- start modal box-->
<div id="DeleteProduct" class="modal fade"></div>
<!-- end modal box-->
@section scripts {
    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/plugins/bootstrap-select/bootstrap-select.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/plugins/select2/select2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/scripts/datatable.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/Template/assets/global/plugins/datatables/media/js/jquery.dataTables.js")"></script>

    <script>

        //On Document Ready
        $(function () {
            loadProductPortlet();
        });

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        /// Product Binding Functions
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        function loadProductPortlet() {

            //Load Grid
            $("#ListProduct").skartAjax({
                url: '@Url.Action("GetAllProducts", "Product", new {area = "Admin"})',
                processData: false,
                contentType: "application/json; charset=utf-8",
                success: function (data, textStatus, jqXhr) {
                    $("#ListProduct").html(data);
                    $("#sample_1").dataTable();
                }
            });
        }


        $(document.body).on("click", ".btnAddProduct", function (e) {
            e.preventDefault();
            var ProductId = $(this).data("id");

            //Open Popup
            $("#AddProduct").skartOpenModal({
                // title: "Add Source Sub-Product",
                title: IsEditMode(ProductId) ? "Edit Product" : "Add Product",
                url: '@Url.Action("AddUpdateProduct", "Product", new {area = "Admin"})',
                data: { ProductId: ProductId }
            });
        });

        function onSuccessProduct(data, textStatus, jqXhr) {
            //Inject data in modal
            $("#AddProduct .modal-body-footer").html(data);
            //Show toastr success message and close popup
            UIToastr.ShowSuccessToaster($("#messageType", "#AddProduct").val(), $("#validationMessage", "#AddProduct").val(), "", "#AddProduct");
            //Rebind Grid
            loadProductPortlet();
        }

        //Delete Button Click
        $(document.body).on("click", ".btnDeleteProduct", function (e) {
            e.preventDefault();
            var ProductId = $(this).data("id");

            //Open Confirmation Popup
            $("#DeleteProduct").skartOpenAlertModal({
                title: "Delete Product",
                bodyText: "Are you sure you want to delete this Product",
                url: '@Url.Action("Delete", "Product", new {area = "Admin"})' + '?ProductId=' + ProductId,
                success: function (data, textStatus, jqXhr) {
                    loadProductPortlet();
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    //UIToastr.ShowSuccessToaster($("Error").val(), $("Error Occured").val(), "", "#DeleteProduct");
                }
            });
        });

        $(document.body).on('change', '#productImageUploader', function () {
            var files = $("#productImageUploader").get(0).files;
            if (files.length > 0) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#productImage').attr('src', e.target.result);
                }
                reader.readAsDataURL(files[0]);
            }
        });
    </script>
}
